<template>
  <div class="Songright">
    
    <div class='t-singer' v-if="islogintype"> <!-- 登陆部分 -->
        <p class="note">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <a class="s-bg" tabindex="1">用户登录</a>
    </div>
    <div class="n-singer">
      <h3>
      <span>入驻歌手</span>
      <a href="/discover/artist/signed/" class="more s-fc3">查看全部 &gt;</a>
      </h3>
      <ul >
        <li v-for = 'item in singers'>
          <a href="/user/home?id=29879272" class="itm f-tdn">
          <div class="head"><img class="j-img" v-bind:src="item.src" width='62px'></div>
          <div class="ifo">
            <h4><span>{{item.name}}</span></h4>
            <p >{{item.type}}</p>
          </div>
          </a>
        </li>
      
      </ul>
      <div><a target="_blank" href="/recruit" hidefocus="true" class="u-btn2 u-btn2-1"><i>申请成为网易音乐人</i></a></div>
    </div>
   
  </div>
</template>

<script>

export default {
  name: 'Songright',
  data () {
    return {
      singers:[
      {name:'周杰伦Jay',src:'http://p4.music.126.net/EYPwwJRI0N29pmLw0O7ubQ==/6634453163643102.jpg?param=130y130',type:'原创音乐人周杰伦'},
      {name:'薛之谦',src:'http://p3.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg?param=130y130',type:'逗逼音乐人薛之谦'},
       {name:'张惠妹aMei',src:'http://p3.music.126.net/p9U80ex1B1ciPFa125xV5A==/5931865232210340.jpg?param=62y62',type:'原创音乐人张惠妹'},
        {name:'羽泉组合',src:'http://p3.music.126.net/VIxIhQPW2wTREM_DfToHUA==/2107763790458943.jpg?param=62y62',type:'国内著名组合'},
         {name:'尚雯婕',src:'http://p3.music.126.net/BvFxS88342IznhCjp6jJKg==/5783431162155757.jpg?param=62y62',type:'原创电子音乐人'},
      
      ],
      islogintype:true
    }
    
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Songright{
    width: 250px;
}
.Songright>div.t-singer{
  height: 126px;
}
.Songright>div .note{
    width: 205px;
    margin: 0 auto;
    padding: 16px 0;
    line-height: 22px;
    color: #666;
}
.s-bg{
    display: block;
    width: 100px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 0 #8a060b;
    margin:  0 auto;
}
.n-singer{
  margin-top: 15px;
}
.n-singer h3{
      position: relative;
      height: 23px;
      margin: 0 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
}
.n-singer h3>span{
  float: left;
  color: #000;
  font-weight: bold;
}
.n-singer h3>a{
    color: #666;
    float: right;
    font-weight: normal;
}
.n-singer>ul{
  margin: 6px 0 14px 20px;
  overflow: hidden;
}
.n-singer>ul>li{
    margin-top: 14px;
    float: left;
    width: 210px;
    height: 62px;
    background: #fafafa;
    border: 1px solid rgba(227, 227, 227,0.7);
}
.n-singer>ul>li>a>div{
    float: left;
    height: 62px;
    cursor: pointer
}
.n-singer .ifo{
  margin-left: 12px;
}
.ifo h4{
  color: #000;
  margin: 12px 0 8px 0;
  font-size: 14px;
  font-weight:bold;
}
.ifo p{
  color: #666;
}
.u-btn2{
  margin-left: 20px;
  border-radius: 4px;
  color: #333;
  background-position: right -305px;
  width: 210px;
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgb(204, 204, 204);
  border-top: none;
  border-bottom: none;

}

</style>
